<template>
  <div class="information-statistics-component">
    <h2 class="title" style="position: absolute; top: 0; left: 0;">信息统计</h2>
    <div class="search-box">
      <input type="text" v-model="searchText" placeholder="搜索" />
      <img @click="toggleSearch" src="@/assets/搜索.svg" alt="Search Icon" />
    </div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>手机号</th>
          <th>认领地点</th>
          <th>丢失物品</th>
          <th>发送短信时间</th>
          <th>认领状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in getCurrentPageData()" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.phone }}</td>  
          <td>{{ item.place }}</td>
          <td>{{ item.lostItem }}</td>
          <td>{{ item.time }}</td>
          <td>{{ item.status }}</td>

        </tr>
      </tbody>
    </table>
    <div class="pagination" style="position: absolute; bottom: 0; left: 300px; width: 500px; background-color: #f8f9fa; padding: 10px;">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>{{ currentPage }}&nbsp;</span>
      <button @click="nextPage" :disabled="currentPage * pageSize >= (searchText? filteredData.length : data.length)">下一页</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const data = ref([
  { id: 1, name: '张三', phone: '1234567890', place:'', lostItem: '身份证', time: '2023-09-01',  },
  { id: 2, name: '李四', phone: '0987654321', place:'', lostItem: '银行卡', time: '2023-09-02',  },
  { id: 3, name: '王五', phone: '2131231232', place:'', lostItem: '银行卡', time: '2023-09-15',  },
  { id: 4, name: '老刘', phone: '1117654321', place:'', lostItem: '身份证', time: '2023-09-22',  },
  { id: 5, name: '老陈', phone: '0987654321', place:'', lostItem: '银行卡', time: '2023-09-30',  },
  { id: 6, name: '程程', phone: '1117654321', place:'', lostItem: '学生证', time: '2023-11-02',  },
  { id: 7, name: '小陈', phone: '2221354321', place:'', lostItem: '银行卡', time: '2024-01-22',  },
  { id: 8, name: '笑笑', phone: '0931254321', place:'', lostItem: '身份证', time: '2024-09-02',  },
  { id: 9, name: '王刚', phone: '0912314321', place:'', lostItem: '身份证', time: '2024-09-02', },
]);

const currentPage = ref(1);
const pageSize = 8;
const searchText = ref('');
const filteredData = ref([]);
let isSearched = ref(false);  // 判断是否已点击搜索

function getCurrentPageData() {
  const start = (currentPage.value - 1) * pageSize;
  const end = start + pageSize;
  return isSearched.value? filteredData.value.slice(start, end) : data.value.slice(start, end);
}

function toggleSearch() {
  filteredData.value = data.value.filter(item => item.name.includes(searchText.value));
  isSearched.value = true;  // 点击搜索后修改
}

function prevPage() {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
}

function nextPage() {
  if (currentPage.value * pageSize < (isSearched.value? filteredData.value.length : data.value.length)) {
    currentPage.value++;
  }
}
</script>

<style scoped>
.information-statistics-component {
  width: 800px;
  height: 500px;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  position: absolute; 
  top: 120px;
  left: 30%;
}

img{
  height: 30px;
   width: 30px;
  position: absolute;
  top: 20px;
  right: 15px;
  cursor: pointer;
  padding: 5px;
}

.search-box input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  position: absolute; top: 1; right: 10px;
}

table {
  width: 800px;
  padding:10px;
  border-collapse: collapse;
  margin-top: 20px;
  position: absolute; 
  top: 50px; 
  right: 25px;
}

th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

th {
  background-color: #4CAF50;
  color: white;
}

.pagination button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
  transition: background-color 0.3s ease;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination button:hover {
  background-color: #45a049;
}
</style>